<template>
  <view class="page-container">
    <map
      v-if="mapData.covers && mapData.covers.length > 0"
      class="map-box"
      :scale="13"
      :latitude="mapData.latitude"
      :longitude="mapData.longitude"
      :markers="mapData.covers"
    >
    </map>
    <delivery-info class="data-view" ref="deliveryInfoRef" @switch="orderListPopupVisible = true"></delivery-info>
    <popup class="popup" v-model:visible="orderListPopupVisible" height="60%">
      <template #content>
        <view class="popup-content">
          <view class="popup-content-rol">
            <user-map-order-component
              v-for="userMapOrder in userMapOrderList"
              :key="userMapOrder.orderId"
              :value="userMapOrder"
              :current-order-id="currentOrderId"
              @enter="changeOrderIdForMap"
            ></user-map-order-component>
          </view>
        </view>
      </template>
    </popup>
  </view>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import DeliveryInfo from './components/delivery-info/index.vue'
import { ref } from 'vue'
import type { UserMapOrder } from '@/types/response/order'
import $store from '@/store'
import Popup from '@/components/popup/index.vue'
import UserMapOrderComponent from './components/user-map-order/index.vue'
import $API from '@/api'
import { ReceivingMethod } from '@/enum/ReceivingMethod'
const deliveryInfoRef = ref()
const orderListPopupVisible = ref(false)
const userInfo = $store.user.userInfo
const globalLocation = ref($store.user.positionStore.globalLocation)

const userMapOrderList = ref<UserMapOrder[]>()
const currentOrderId = computed(() => deliveryInfoRef.value?.id)
const mapData = ref({
  latitude: 39.90923,
  longitude: 116.39742,
  covers: []
})
// 切换要显示的orderId
function changeOrderIdForMap(orderId: number) {
  deliveryInfoRef.value!.switchOrder(orderId)
  orderListPopupVisible.value = false
}
watch(
  () => [deliveryInfoRef.value?.orderForMapShow, globalLocation.value.latitude, globalLocation.value.longitude],
  async ([orderForMapShow, lat, lng]) => {
    const isDeliveryOrder = ReceivingMethod.DELIVERY === orderForMapShow?.receivingMethod
    if (!isDeliveryOrder && (lat == null || lng == null)) return

    if (orderForMapShow == null) {
      // 如果没有订单，只显示我的位置
      mapData.value.covers = [
        {
          id: 1,
          latitude: (mapData.value.latitude = globalLocation.value.latitude),
          longitude: (mapData.value.longitude = globalLocation.value.longitude),
          iconPath: userInfo.getValue()?.avatar,
          width: 30,
          height: 30
        }
      ] as any
    } else {
      const _covers = [
        {
          id: 1,
          latitude: (mapData.value.latitude = isDeliveryOrder
            ? orderForMapShow.consigneeLatitude
            : globalLocation.value.latitude),
          longitude: (mapData.value.longitude = isDeliveryOrder
            ? orderForMapShow.consigneeLongitude
            : globalLocation.value.longitude),
          iconPath: userInfo.getValue()?.avatar,
          width: 30,
          height: 30
        },
        {
          id: 2,
          latitude: orderForMapShow.shopForUserOrderMap.latitude,
          longitude: orderForMapShow.shopForUserOrderMap.longitude,
          iconPath: orderForMapShow.shopForUserOrderMap.logo,
          width: 30,
          height: 30
        },
        {
          id: 3,
          latitude: orderForMapShow.riderLocation?.latitude,
          longitude: orderForMapShow.riderLocation?.longitude,
          iconPath: '/static/image/evaluate/rider.png',
          width: 30,
          height: 30
        }
      ].filter((item) => item.latitude != null && item.longitude != null)
      console.log('_covers=', _covers)
      mapData.value.covers = _covers as any
    }
  },
  { immediate: true, deep: true }
)

// 刷新userMapOrderList
async function refreshUserMapOrderList() {
  const result = await $API.order.listForMapShow()
  if (result.success) userMapOrderList.value = result.data
}
// 当订单列表forMap列表从隐藏到显示时，刷新数据
watch(
  () => orderListPopupVisible.value,
  (newValue, oldValue) => newValue && !oldValue && refreshUserMapOrderList()
)
</script>

<style scoped lang="scss">
.page-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;

  .map-box {
    position: absolute;
    width: 100vw;
    height: 100vh;
  }

  .popup {
    .popup-content {
      overflow-y: auto;
      padding-top: 40rpx;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      box-sizing: border-box;
      inset: 0;

      .popup-content-rol {
        overflow-y: auto;
        padding: 0 30rpx;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        box-sizing: border-box;
        inset: 0;
      }
    }
  }
}
</style>
